<template>
    <Modal v-model="model" title="登陆" :mask-closable="false" :footer-hide="true" width="300"
           :mask="false" :closable="close">
        <div class="">
            <Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit">
                <FormItem prop="userName">
                    <Input v-model="form.userName" placeholder="请输入手机号">
                        <span slot="prepend">
                          <Icon :size="16" type="ios-person"></Icon>
                        </span>
                    </Input>
                </FormItem>
                <FormItem prop="password">
                    <Input type="password" v-model="form.password" placeholder="请输入密码">
                    <span slot="prepend">
                      <Icon :size="14" type="md-lock"></Icon>
                    </span>
                    </Input>
                </FormItem>
                <FormItem prop="verify">
                    <Input v-model="form.verify" style="width: 80px;">
                    </Input>
                    <img style="height: 32px; margin: auto 0;line-height: 1.5;vertical-align:middle;margin-left: 5px;"
                         @click="changeVerifyImg" :src="verifyImg"/>
                    <span style="margin-left: 5px;">点击刷新</span>
                </FormItem>
                <FormItem>
                    <Button @click="handleSubmit" type="primary" long>登录</Button>
                </FormItem>
            </Form>
            <p class="login-tip" :class="msgError?'red':''">{{msg}}</p>
        </div>
    </Modal>
</template>

<script>
    import config from '@/config'
    import {getUserInfo, login} from "../../../api/user";
    import {setToken} from "../../../libs/util";

    export default {
        name: "miniLoginForm",

        data() {
            return {
                msg: '输入手机号和密码密码',
                msgError: false,
                model: false,
                form: {
                    userName: '18040417207',
                    password: '266457',
                    verify: ''
                },
                verifyImg: config.baseUrl.pro + 'verify',
                rules: {
                    userName: {required: true, message: '账号不能为空', trigger: 'blur'},
                    password: {required: true, message: '密码不能为空', trigger: 'blur'},
                    verify: {required: true, message: '验证码不能为空', trigger: 'blur'}
                },
                close:true,
                callback:function () {

                }
            }
        },
        methods: {
            handleSubmit() {
                this.$refs.loginForm.validate((valid) => {
                    if (valid) {
                        this.$Message.loading({
                            content: '登陆中。。。'
                        })

                        login(this.form).then(res => {
                            if (res.code === 10002) {
                                this.msgError = true
                                this.changeVerifyImg()
                                for (let a in res.msg) {
                                    this.msg = res.msg[a]
                                    break;
                                }
                            } else if (res.code === 0) {
                                setToken(res.data)
                                getUserInfo(res.data).then(res => {
                                    console.log(res.code)
                                    if (res.code === 0) {
                                        this.$Message.success('登陆中成功')
                                        console.log(this.callback())
                                        this.model = false
                                    } else {
                                        this.msg = '请重新登陆'
                                        this.msgError = true
                                    }
                                })
                            } else {
                                this.msgError = true
                                this.msg = res.msg
                            }
                        })
                    }
                })
            },
            changeVerifyImg() {
                this.verifyImg = config.baseUrl.pro + 'verify?time=' + Date.parse(new Date())
            }
        },
    }
</script>

<style scoped>
    .red {
        color: red !important;
    }
</style>
